<template>
  <div>
    <h1>歌曲购买</h1>
    <div class="table-wrapper">
      <div class="count-down-wrapper">
        <div class="count-down">
          <p class="time-left">
            请在
            <span class="minute">{{ timerElement }}</span>
            分钟内完成支付
          </p>
          <p class="tip">超时订单会自动取消，如遇支付问题，请致电客服：8888-8888</p>
        </div>
      </div>
      <div class="countdown-timer"></div>
      <p class="warning">请仔细核对歌曲信息，购买后将<span class="attention">无法取消订单和退款</span></p>
      <div>
        <el-form>
          <el-form-item>
            <el-table ref="multipleTable" :data="musicList" tooltip-effect="dark" style="width: 100%;">
              <el-table-column prop="musicId" label="音乐编号" width="170" align="center"></el-table-column>
              <el-table-column prop="musicName" label="音乐名称" width="120" align="center"></el-table-column>
              <el-table-column prop="musicImage" label="歌曲图片" width="120" align="center"></el-table-column>
              <el-table-column prop="musicPrice" label="歌曲单价" width="120" align="center"></el-table-column>
              <el-table-column prop="singerName" label="歌手姓名" width="320" align="center"></el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align: right;">
        <div>总价:{{ totalPay }}</div>
        <el-button type="primary" @click="pay">支付</el-button>
      </div>

      <!--支付-->
<!--      <div style="visibility: hidden;">
        <form id="payform" action="http://api.wncinema.com/api/pay/web/alipay" method="post">
          <input type="hidden" v-model="orderId" name="out_trade_no"/>
          <input type="hidden" v-model="totalPay" name="total_amount"/>
          <input type="hidden" v-model="movieName" name="subject"/>
          <input type="hidden" v-model="body" name="body"/>

          <input type="hidden" id="acctoken" name="acctoken">
        </form>
      </div>-->
    </div>
  </div>
</template>

<script>

import {getToken} from "@/utils/auth";
import request from "@/utils/request";

export default {
  name: 'PayView',
  data() {
    return {
      orderId: '',
      totalPay: 100,
      description: '',
      orderName:'购买音乐',
      accToken:'',
      musicIds:[],
      musicList: [
        {
          musicName: '示例歌曲',
          musicPrice: '¥2.00',
          purchased: false
        }
      ],
      countdownMinutes: 5,
      countdownSeconds: 0,
      timerElement: ''
    };
  },
  methods: {
    //判断是在什么地方生成,刷新的时候是否要刷新id,要的话就在这边//
    // 不要的话就在点击购买之后,调转页面到pay之前
    /**得到订单编号,雪花id*/
    getOrderSn() {
      request({
        url: 'order/order/web/getOrderSn',
        method: 'get',
      }).then(response => {
        if (response.code == 200) {
          this.orderId = response.msg;
        }
      })
    },
    /**支付*/
    pay() {
      this.$confirm('确定支付?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let adminToken = getToken()
        this.accToken = "Bearer " + adminToken
        let payUrl = "http://api.pipi.com/api/pay/web/alipay?out_trade_no="+this.orderId+"&total_amount="+this.totalPay
                      +"&subject="+this.orderName+"&body="+this.description+"&accToken="+this.accToken;
        console.log("url======>"+payUrl)
        window.location.href = payUrl;

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消支付'
        });
      });
    },
    getMusic(){
      this.musicIds = this.musicIds.split(',')
      console.log(this.musicIds)
      request({
        url: "/music/music/web/findByIds",
        method: "get",
        params: {
          ...this.queryParams,
          musicType: this.musicTypeId
        }
      }).then(response => {
        this.musicList = response.rows;
        this.total = response.total;
        console.log("查询到的音乐列表：", this.musicList);
      })

    },
    startCountdown() {
      //请求后端传值redis

      const interval = setInterval(() => {
        if (this.countdownSeconds > 0) {
          this.countdownSeconds--;
        } else {
          if (this.countdownMinutes > 0) {
            this.countdownMinutes--;
            this.countdownSeconds = 59;
          } else {
            clearInterval(interval);
          }
        }
        this.updateCountdownDisplay();
      }, 1000);
    },
    updateCountdownDisplay() {
      this.timerElement = `${this.countdownMinutes}:${this.countdownSeconds < 10 ? '0' : ''}${this.countdownSeconds}`;
    }
  },
  created() {
    /**获取url的参数*/
    this.orderId = this.$route.query.orderId;
    this.totalPay = this.$route.query.totalPay;
    /**根据ids查询数据库表*/
    this.getMusic()
    /**5分钟倒计时*/
    this.startCountdown();

    /**获取雪花id订单编号*/
    this.getOrderSn();
  }

}
</script>

<style scoped lang="less">
.count-down-wrapper {
  width: 100%;
  height: 90px;
  padding-top: 20px;
  margin-bottom: 40px;
  background-color: #fff3f3
}

.count-down-wrapper .count-down {
  padding-left: 55px;
  min-height: 41px;
  margin-left: 30px;
  background: url() no-repeat 0 17px;
}

.count-down-wrapper .time-left {
  font-size: 16px;
  color: #666;
  margin-bottom: 4px
}

.count-down-wrapper .time-left .minute, .count-down-wrapper .time-left .second {
  font-size: 32px;
  color: #f03d37;
  margin: 0 5px
}

.count-down-wrapper .tip {
  font-size: 14px;
  color: #f03d37
}

.table-wrapper {
  margin: 20px 130px;
  padding: 0 100px;
}
</style>